<template>
	<view class="withdraw">
		<custom-navi :show-home="false">提现</custom-navi>
		<view class="withdraw-content">
			<view class="money">168,888.00</view>
			<view class="title">可提现金额(元)</view>
			<view class="subhead">提现金额</view>
			<view class="rest">
				<view class="rest-sign">¥</view>
				<view class="rest-txt">
					<input type="text" value="" placeholder="最低提现100元" placeholder-style="font-size:28rpx; color:rgba(112,112,112,1);"/>
				</view>
				<view class="rest-right" @tap="allBtn">全部</view>
			</view>
			<view class="rest" style="border-bottom: none;">
				<view class="rest-title">银行卡</view>
				<view class="rest-txt">暂无绑定银行卡</view>
				<view class="rest-right">{{operate}}</view>
			</view>
			<view class="rest" style="border-bottom: none; padding-top: 0;" v-if="genre!='1'">
				<view class="rest-title">持卡人</view>
				<view class="rest-txt">张立</view>
			</view>
		</view>
		<view class="withdraw-btn" :class="{'green':genre!='1'}">提交申请</view>
		<view class="withdraw-modal" v-if="modals">
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				genre:'1',
				operate:'', // 绑定或更换
				modals:true,
			}
		},
		onLoad() {
			if(this.genre === '1'){
				this.operate = '绑定'
			}else{
				this.operate = '更换'
			}
		},
		methods:{
			allBtn(){ // 全部按钮
				
			},
			
		}
	}
</script>

<style lang="scss">
	.withdraw{
		height: 100vh;
		background-color: rgba(247, 247, 247, 1);
		padding: 0 32rpx;
		position: relative;
		&-modal{
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: #FFFFFF;
			top: 0;
			left: 0;
			z-index: 999;
		}
		&-btn{
			width:686rpx;
			height:88rpx;
			background:rgba(221,221,221,1);
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:88rpx;
			text-align: center;
			color:rgba(255,255,255,1);
			margin-top: 52rpx;
			opacity:1;
		}
		.green{
			background:rgba(12,212,211,1);
			color:rgba(255,255,255,1);
		}
		&-content{
			width:686rpx;
			
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:20rpx;
			margin-top: 22rpx;
			.money{
				width:100%;
				text-align: center;
				font-size:64rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(3,3,3,1);
				opacity:1;
				padding-top: 60rpx;
			}
			.title{
				width:100%;
				text-align: center;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(3,3,3,1);
				opacity:1;
				margin-top: 6rpx;
			}
			.subhead{
				width:100%;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(3,3,3,1);
				opacity:1;
				margin-left: 32rpx;
				margin-top: 54rpx;
			}
			.rest{
				display: flex;
				align-items: center;
				padding: 28rpx 32rpx;
				margin-top: 20rpx;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				&-sign{
					font-size:40rpx;
					font-family:PingFang SC;
					font-weight:600;
					color:rgba(3,3,3,1);
					opacity:1;
					margin-right: 54rpx;
				}
				&-title{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(3,3,3,1);
					opacity:1;
					margin-right: 52rpx;
				}
				&-txt{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(112,112,112,1);
					opacity:1;
				}
				&-right{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(0,144,250,1);
					opacity:1;
					margin-left: auto;
				}
			}
			
		}
	}
</style>
